<template>
  <z-divider orientation="left">Normal</z-divider>
  <z-row type="flex">
    <z-col :span="6" :order="4">1 col-order-4</z-col>
    <z-col :span="6" :order="3">2 col-order-3</z-col>
    <z-col :span="6" :order="2">3 col-order-2</z-col>
    <z-col :span="6" :order="1">4 col-order-1</z-col>
  </z-row>
  <z-divider orientation="left">Responsive</z-divider>
  <z-row type="flex">
    <z-col :span="6" :xs="{ order: 1 }" :sm="{ order: 2 }" :md="{ order: 3 }" :lg="{ order: 4 }">
      1 col-order-responsive
    </z-col>
    <z-col :span="6" :xs="{ order: 2 }" :sm="{ order: 1 }" :md="{ order: 4 }" :lg="{ order: 3 }">
      2 col-order-responsive
    </z-col>
    <z-col :span="6" :xs="{ order: 3 }" :sm="{ order: 4 }" :md="{ order: 2 }" :lg="{ order: 2 }">
      3 col-order-responsive
    </z-col>
    <z-col :span="6" :xs="{ order: 4 }" :sm="{ order: 3 }" :md="{ order: 1 }" :lg="{ order: 1 }">
      4 col-order-responsive
    </z-col>
  </z-row>
</template>

<style lang="less" scoped>
.ant-col {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ant-col-order-1, .ant-col-order-3, .ant-col-xs-order-4, .ant-col-xs-order-2 {
  background: #0080ff;
  height: 60px;
}
.ant-col-order-2, .ant-col-order-4, .ant-col-xs-order-3, .ant-col-xs-order-1 {
  background: #00a0e9;
  height: 60px;
}
</style>
